import React, { useState } from 'react';
import { Input, Button, Row, Col, message } from 'antd';
import { useNavigate } from 'react-router-dom';
import api from '../../utils/api';

const Register: React.FC = () => {
    const [username, setUsername] = useState('');
    const [password, setPassword] = useState('');
    const [loading, setLoading] = useState(false);
    const navigate = useNavigate();

    const handleSubmit = async (e: React.FormEvent) => {
        e.preventDefault();
        if (!username || !password) {
            message.error('请输入用户名和密码');
            return;
        }
        
        setLoading(true);
        try {
            const response = await api.post('/auth/register', {
                username,
                password,
            });
            
            console.log('注册响应:', response.data);
            
            if (response.data.success) {
                message.success('注册成功');
                navigate('/');
            } else {
                message.error(response.data.message || '注册失败');
            }
        } catch (error: any) {
            console.error('注册失败:', error);
            
            // 方法1: 通过检查response对象处理错误
            if (error.response && error.response.data) {
                const errorMsg = error.response.data.message || '';
                
                if (errorMsg.includes('用户名已存在')) {
                    message.error('用户名已被注册，请使用其他用户名');
                } else {
                    message.error(errorMsg || '注册失败，请稍后重试');
                }
            } else {
                message.error('注册失败，请检查网络连接');
            }

        } finally {
            setLoading(false);
        }
    };
    
    return (
        <div className="min-h-screen flex items-center justify-center bg-gray-50 p-8">
            <div className="bg-white p-8 rounded-lg shadow-md w-full max-w-md">
                <h2 className="text-2xl font-bold text-gray-800 mb-6">注册</h2>
                <form onSubmit={handleSubmit}>
                    <Input
                        value={username}
                        onChange={(e) => setUsername(e.target.value)}
                        placeholder="用户名"
                        className="mb-4 w-full"
                    />
                    <Input.Password
                        value={password}
                        onChange={(e) => setPassword(e.target.value)}
                        placeholder="密码"
                        className="mb-4 w-full"
                    />
                    <Row gutter={8}>
                        <Col span={12}>
                            <Button 
                                type="primary" 
                                htmlType="submit" 
                                block 
                                className="w-full"
                                loading={loading}
                            >
                                注册
                            </Button>
                        </Col>
                        <Col span={12}>
                            <Button onClick={() => navigate('/')} block className="w-full">
                                返回
                            </Button>
                        </Col>
                    </Row>
                </form>
            </div>
        </div>
    );
};

export default Register;